import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { ProgramLeftWrap } from "./style";
import {
  getSizeImage,
  formalMinuteSecondsF,
  getYearMonthDay,
  formalMinuteSeconds,
} from "@/utils/format-utils";
import { commentDjAction } from "../store/actionTypes";
import Comment from "@/components/aboutComment/comment";
import Pagination from "@/components/pagination";
import { NavLink } from "react-router-dom";
import classNames from "classnames";
import Four from "@/components/button/fourCheck";

export default memo(function ProgramLeft(props) {
  const programInfo = props.progrom.code == 200 && props.progrom.program;
  const [pageState, setPageState] = useState(1);
  const [indexId, setIndexId] = useState();
  const userId = programInfo.dj !== undefined ? programInfo.dj.userId : "";
  const categoryId = programInfo ? programInfo.radio.categoryId : "";

  // (userId) 1为空 2为code==400  3为id才有数据
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(commentDjAction(props.id, 20, (pageState - 1) * 20));
  }, [dispatch, pageState, props.id, userId]);

  const { commentInfo } = useSelector(
    (state) => ({
      commentInfo: state.getIn(["program", "commentInfo"]),
    }),
    shallowEqual
  );

  // (programInfo)

  const getPage = (page) => {
    // (page)
    setPageState(page);
  };

  const comeIndex = (id) => {
    // (id)
    setIndexId(id);
  };

  const closeIndex = () => {
    setIndexId(false);
  };
  const collectSongs = (id) => {};
  const zhuanfaSongs = (id) => {};
  const loadSongs = (id) => {};

  return (
    <ProgramLeftWrap>
      <div className="program-top-box clear">
        <div className="program-img">
          <img
            src={programInfo ? getSizeImage(programInfo.coverUrl, 140) : ""}
            alt=""
          />
        </div>
        <div className="program-top-text">
          <div className="program-top-text-box">
            <i className="program-tips icon2"></i>
            <span>{programInfo ? programInfo.mainSong.name : ""}</span>
          </div>
          <div className="program-top-name-box">
            <i className="program-top-tips icon2"></i>
            <span>
              <NavLink
                to={{
                  pathname: "/user/home",
                  search: "?id=" + userId,
                }}
              >
                {programInfo ? programInfo.radio.name : ""}
              </NavLink>
            </span>

            <a className="program-dy button2">
              <i className="program-icon button2">
                <em className="icon2"></em>
                订阅({programInfo ? programInfo.radio.subCount : ""})
              </i>
            </a>
          </div>
        </div>
      </div>
      <div className="playlist-play-box">
        <a title="播放" className="playlist-playbtn button2">
          <i className="button2">
            <em className="ply button2"></em>
            播放&nbsp;
            {programInfo
              ? formalMinuteSecondsF(programInfo.mainSong.duration)
              : ""}
          </i>
        </a>
        <a className="addplaylist u-btn button2">
          <i className="dz-i u-btn-i button2">
            <em className="dz button2"></em>
            <span>
              (
              {programInfo
                ? programInfo.likedCount === 0
                  ? "点赞"
                  : programInfo.likedCount
                : ""}
              )
            </span>
          </i>
        </a>
        <a className="button2 u-btn">
          <i className="pl u-btn-i button2">
            <span>
              (
              {programInfo
                ? programInfo.commentCount === 0
                  ? "评论"
                  : programInfo.commentCount
                : ""}
              )
            </span>
          </i>
        </a>
        <a className="u-btn button2">
          <i className="zf u-btn-i button2">
            <span>
              (
              {programInfo
                ? programInfo.shareCount === 0
                  ? "转发"
                  : programInfo.shareCount
                : ""}
              )
            </span>
          </i>
        </a>
        <a className="u-btn button2">
          <i className="xz u-btn-i button2">下载</i>
        </a>
        <div className="u-outlink">
          <i className="u-icn-music imgIcon"></i>
          <a>生成外链播放器</a>
        </div>
      </div>
      <div className="sub">
        <NavLink
          to={{
            pathname: "/discover/djradio/category",
            search: "?id=" + categoryId,
          }}
          className="u-type-red u-type cat"
        >
          {programInfo ? programInfo.radio.category : ""}
        </NavLink>
        <strong>
          <span className="u-type-radio-name">
            {programInfo ? programInfo.radio.name : ""}
          </span>
          第{programInfo ? programInfo.serialNum : ""}期
        </strong>
        <span className="create-time">
          {getYearMonthDay(programInfo ? programInfo.scheduledPublishTime : "")}
          &nbsp;创建
        </span>
        <span className="play-text">
          播放：
          <span className="counttime">
            {programInfo ? programInfo.listenerCount : ""}
          </span>
          次
        </span>
      </div>
      <p className="p-introduction">
        介绍：
        {programInfo
          ? programInfo.description.split("\n").map((item, index) => {
              return item == "" ? (
                <React.Fragment key={index}>
                  <br />
                  <br />
                </React.Fragment>
              ) : (
                item
              );
            })
          : ""}
      </p>
      {programInfo ? (
        programInfo.songs.length !== 0 && programInfo.songs[0].album ? (
          <div className="program-song-div">
            <div className="program-thead">
              <p>
                节目包含歌曲列表<span>（{programInfo.songs.length}首歌）</span>
              </p>
              <div className="program-close">
                收起<i></i>
              </div>
            </div>
            <ul>
              {programInfo.songs.map((item, index) => {
                const checkShow = item.id === indexId;
                return (
                  <li
                    key={item.id}
                    onMouseMove={(e) => comeIndex(item.id)}
                    onMouseLeave={closeIndex}
                  >
                    <div className="program-song">
                      <div className="program-song-page">
                        {index}
                        <i className="icon-play tablepng"></i>
                      </div>
                      <div className="program-song-name">
                        <NavLink
                          to={{
                            pathname: "/song",
                            search: "?id=" + item.id,
                          }}
                        >
                          {item.name}
                        </NavLink>
                        {item.alias
                          ? item.alias.map((itema, indexa) => {
                              return (
                                <span key={indexa} className="song-name">
                                  {" "}
                                  - {itema}
                                </span>
                              );
                            })
                          : ""}
                      </div>
                      <div className="program-song-time">
                        <div className={classNames({ isClose: checkShow })}>
                          {formalMinuteSeconds(item.duration)}
                        </div>
                        <div
                          className={classNames({
                            isSelect: checkShow,
                            trTimeBox: true,
                          })}
                        >
                          <Four
                            id={item.id}
                            collectSongs={(e) => collectSongs(item.id)}
                            zhuanfaSongs={(e) => zhuanfaSongs(item.id)}
                            loadSongs={(e) => loadSongs(item.id)}
                          />
                        </div>
                      </div>
                      <div className="program-song-artist">
                        {item.artists.map((itemb, indexb) => {
                          return (
                            <NavLink
                              to={{
                                pathname: "/artist",
                                search: "?id=" + itemb.id,
                              }}
                              key={itemb.name}
                            >
                              {itemb.name}
                            </NavLink>
                          );
                        })}
                      </div>
                      <div className="program-song-info">{item.album.name}</div>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>
        ) : (
          <React.Fragment></React.Fragment>
        )
      ) : (
        <React.Fragment></React.Fragment>
      )}
      <Comment pageNum={pageState} comments={commentInfo} />
      {commentInfo.total / 20 < 1 ? (
        ""
      ) : (
        <Pagination
          size={20}
          page={pageState}
          getPage={getPage}
          total={commentInfo.total}
        />
      )}
    </ProgramLeftWrap>
  );
});
